<template>
    <div style="margin:1px 0 16px;">
        <!-- 面包屑导航 -->
        <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item class="breadcrumb_item title" :to="{ path: '/' }">
                <span class="title">概况</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumb_item" v-for="(item, i) in $route.meta.thumb" :key="item.to">
                <span :class="{ 'fontColor': i == endIndex}" class="title" @click="toLink(item.to)">{{ item.text }}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    props: {
        queryActive:{
            typeof: String,
            default: ''
        },
    },
    data() {
        return {
            endIndex: '',
        }
    },
    methods: {
        getEndIndex() {
            this.endIndex = this.$route.meta.thumb.length - 1
        },
        toLink(to) {
            if (to == null) {
                return
            } else if (to == this.$route.path) {
                return
            } else if(this.$props.queryActive!='') {
                this.$router.push({path:to,query:{active:this.$props.queryActive}})
            }else{
                this.$router.push(to)
            }

        }
    },
    mounted() {
        this.getEndIndex()
        //console.log();
      

        ////console.log('路由', this.$route);
    },


}
</script>

<style lang="scss" scoped>
.breadcrumb {
    min-width: 600px;

    ::v-deep .el-breadcrumb__inner {
        color: #C3C3C3;
        font-size: 12px;
        font-weight: normal;
    }

    ::v-deep .el-breadcrumb__separator {
        margin-left: 8px;
        margin-right: 7px;
    }

    .fontColor {
        color: #262626;
        cursor: none;



    }

    .title {
        cursor: pointer;
        transition: 0.2s;

        &:hover {
            opacity: 0.8;
            color: #262626;

        }
    }


}</style>